<template>
  <div>
    <a-form-model :ref="myRef" :model="model" :layout="layout" :hideRequiredMark="hideRequiredMark"
                  :labelAlign="labelAlign" :rules="rules" :colon="colon" :validateOnRuleChange="validateOnRuleChange"
                  :labelCol="labelCol" :wrapperCol="wrapperCol">
      <div v-if="rowFlag" :class="compact?'compactRow':null">
        <a-row type="flex" :compact="compact" :gutter="gutter" :justify="justify" :align="align">
          <slot/>
        </a-row>
      </div>
      <div v-if="!rowFlag" :class="compact?'compactRow':null">
        <slot/>
      </div>
    </a-form-model>
  </div>
</template>
<script>
// import 'ant-design-vue/dist/antd.css'
import {uuid} from '@/utils/util'

export default {
  name: 'ZhForm',
  props: {
    formRef: {
      type: String,
      default: null
    },
    //是否紧凑型
    compact: {
      type: Boolean,
      default: true
    },
    //是否使用统一的row
    rowFlag: {
      type: Boolean,
      default: true
    },
    //默认全部可编辑设置
    disabled: {
      type: Boolean,
      default: false
    },
    gutter: {
      type: Array,
      default: function () {
        return [0, 0]
      }
    },
    //flex 布局下的水平排列方式：start end center space-around space-between
    justify: {
      type: String,
      default: "start"
    },
    //表单布局 'horizontal'|'vertical'|'inline'
    layout: {
      type: String,
      default: "horizontal"
    },
    //隐藏所有表单项的必选标记
    hideRequiredMark: {
      type: Boolean,
      default: false
    },
    //label 标签的文本对齐方式	'left' | 'right'
    labelAlign: {
      type: String,
      default: "right"
    },
    //行内对齐  布局下的垂直对齐方式：top middle bottom
    align: {
      type: String,
      default: "top"
    },
    //表单数据对象
    model: {
      type: Object,
      default: function () {
        return {}
      }
    },
    //表单验证规则
    rules: {
      type: Object,
      default: function () {
        return {}
      }
    },
    //配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效)
    colon: {
      type: Boolean,
      default: true
    },
    //是否在 rules 属性改变后立即触发一次验证
    validateOnRuleChange: {
      type: Boolean,
      default: true
    },
    //label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}
    labelCol: {
      type: Object,
      default: function () {
        return {
          xs: {span: 24},
          sm: {span: 8},
          md: {span: 9},
          lg: {span: 8},
          xl: {span: 8},
          xxl: {span: 8}
        }
      }
    },
    //需要为输入控件设置布局样式时，使用该属性，用法同 labelCol
    wrapperCol: {
      type: Object,
      default: function () {
        return {
          xs: {span: 24},
          sm: {span: 16},
          md: {span: 15},
          lg: {span: 16},
          xl: {span: 16},
          xxl: {span: 16}
        }
      }
    },
    span: Number,
    //≥768px
    md: {
      type: Number,
      default: 12
    },
    //≥576px
    sm: {
      type: Number,
      default: 24
    },
    //<576px
    xs: {
      type: Number,
      default: 24
    },
    //≥992px
    lg: {
      type: Number,
      default: 8
    },
    //≥1200px
    xl: {
      type: Number,
      default: 8
    },
    //≥1600px
    xxl: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      myRef: this.formRef ? this.formRef : uuid()
    }
  },
  methods: {
    validate(callback) {
      this.$refs[this.myRef].validate(valid => {
        if (valid) {
          callback && callback(valid)
        } else {
          callback && callback(valid)
        }
      });
    },
    validateField(props, callback) {
      this.$refs[this.myRef].validateField(props, errorMessage => {
        callback && callback(errorMessage)
      });
    },
    checkForm(props) {
      let flag = true
      if (props && props.length > 0) {
        this.$refs[this.myRef].validateField(props, errorMessage => {
          if (errorMessage) {
            flag = false
          }
        });
      } else {
        this.$refs[this.myRef].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        });
      }
      return flag
    },
    resetFields() {
      this.$refs[this.myRef].resetFields()
    },
    clearValidate(props) {
      this.$refs[this.myRef].clearValidate(props)
    }
  }
}
</script>
<style scoped lang="scss">
// ::v-deep .compactRow {
//   //重写表单样式
//   .ant-form-item {
//     margin: 0;
//   }

//   .has-error .ant-form-explain {
//     text-align: right;
//     margin-top: -4vh;
//     display: none;
//   }

//   .show-help-leave {
//     text-align: right;
//     margin-top: -4vh;
//     display: none;
//   }
// }
</style>